class DevUnlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            unlockList: []
        }

        this.typeMap = {
            "face": "人脸识别",
            "card": "IC卡",
            "call": "呼叫开锁",
            "app": "app开锁",
            "visitor": "密码开锁"
        }
    }

    updateUnlockPage(page, pageSize) {

        let comm = this.refs.commSelect.commCode;

        let building = this.refs.commSelect.buildingCode;
        let unit = this.refs.commSelect.unitCode;

        let params = {
            commCode: comm,
            page: page,
            pageSize: pageSize,
            building: building,
            unit: unit,
            timeStart: this.refs.normalDate.rangeStart,
            timeEnd: this.refs.normalDate.rangeEnd
        };

        let nameOrPhone = this.refs.phoneOrName.value;
        let regex = /^[0-9]{11}$/;
        if (regex.test(nameOrPhone))
            params.ownerMob = nameOrPhone;
        else
            params.ownerName = nameOrPhone;

        postJson("/EquCtrl/getDevUnlockLog.x", params, (data) => {
            this.pageCount = data.data.size;
            this.setState({unlockList: data.data.list});
        })
    }

    onChangeComm() {
        this.refs.table.refresh();
    }

    accountToStr(account) {
        if (!account)
            return null;
        let ret = account;
        if (account.length == 12) {
            if (account.substr(4, 7) === "0000000") {
                let devNum = parseInt(account.substr(11, 1));
                if (devNum < 10)
                    ret = "管理处";
                else
                    ret = "围墙机" + account.substr(11, 1);
            }
            else {
                ret = account.substr(4, 2) + "栋 ";
                ret += account.substr(6, 2) + "单元 ";
                if (account.substr(8, 2) === "00") {
                    ret += "梯口机-" + account.substr(11, 1);
                } else
                    ret += account.substr(8, 4) + "房";
            }
        }
        return ret;
    }

    seeBrushCardInfo(url) {
        if (url !== undefined && url !== '') {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            this.layer.msg("此记录无照片!");
        }
    }

    render() {
        console.log(this.state.unlockList);
        return (
            <Frame header="开锁日志">
                <Form type="pane">
                    <Item>
                        <Label>时间选择</Label>
                        <DateSelect ref="normalDate" range="true" placeHolder="默认一个月内"></DateSelect>
                        <Label width="lg">业主电话或名称</Label>
                        <Input ref="phoneOrName"/>
                    </Item>
                    <Item>
                        <Label>楼栋信息</Label>
                        <LayuiCommSelect ref="commSelect" mask={['floor', 'room']}
                                         onChangeComm={(comm) => this.onChangeComm(comm)}></LayuiCommSelect>
                        <Button onClick={() => this.updateUnlockPage(1, 10)}>查询</Button>
                    </Item>
                </Form>
                <Table count={this.pageCount} pageOnClick={(page, pageSize) => this.updateUnlockPage(page, pageSize)}
                       ref="table">
                    <thead>
                    <tr>
                        <th>开锁类型</th>
                        <th>开锁设备</th>
                        <th>开锁用户</th>
                        <th>房屋信息</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.unlockList.length > 0 ? this.state.unlockList.map((data) => {
                            return (
                                <tr>
                                    <td>{this.typeMap[data.type]}</td>
                                    <td>{this.accountToStr(data.devNumber)}</td>
                                    <td>{data.ownerName ? data.ownerName : (data.type === "card" ? '管理员' : '无')}</td>
                                    <td>{data.roomInfo ? data.roomInfo : (data.type === "card" ? '超级卡' : this.accountToStr(data.roomInfoNum))}</td>
                                    <td>{data.time ? (data.time) : '无'}</td>

                                    <td>
                                        {
                                            data.imageUrl ?
                                                <button type="button" className="layui-btn layui-btn-primary layui-btn-small"
                                                        onClick={() => this.seeBrushCardInfo(data.imageUrl)}>查看图片
                                                </button> : "无照片"}
                                    </td>
                                </tr>
                            )
                        }) : ''
                    }
                    </tbody>
                </Table>
            </Frame>
        )
    }

}

ReactDOM.render(<DevUnlock/>, document.getElementById("DevUnlock"));